<template>
<h2>toRaw和markRaw</h2>
<h3>state:{{state}}</h3>
<hr>
<button @click="testToRaw">测试toRaw</button>
<button @click="testMarkRaw">测试markRaw</button>
</template>

<script>
import {defineComponent,reactive,toRaw,markRaw} from 'vue'
export default defineComponent({
  name: 'App',
  setup(){
    const state = reactive({
      name:'小明',
      age:20
    })
    const testToRaw=()=>{
      // console.log(11);
      const user = toRaw(state)
      // state.name += '==='
      user.name += '==='
    }
    const testMarkRaw=()=>{
      // console.log('测试');
      // state.likes = ['吃','喝']
      // state.likes[0] += '=='
      // console.log(state);
      const likes = ['吃','喝']
      state.likes=markRaw(likes)
      setInterval(()=>{
        state.likes[0] += '==='
        console.log('定时器');
      },2000)
    }
    return {
      state,
      testToRaw,
      testMarkRaw
    }
  }
})
</script>

<style lang="less" scoped>

</style>
